<template>
  <a-button
    type="primary"
    @click="
      () => {
        handleAdd()
      }
    "
    >添加</a-button
  >
  <tableData
    :tableList="tableList"
    @changePagination="changePagination"
    :pagination="pagination"
    @delBanner="delBanner"
    @handleAdd="handleAdd"
  />
  <EditModal ref="modalRef" title="添加" @update="handleUpdate" />
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import EditModal from './components/carouselView/editModal.vue'
import tableData from './components/carouselView/tableData.vue'
import type { TTable } from './components/carouselView/type.dict'
import { message } from 'ant-design-vue'
import { listResources, createResource, updateResource, deleteResource } from '@/api/resource.api'
import type { CreateAdminResourceDto, UpdateAdminResourceDto } from '@/types/resource.api'

//初始化SDK实例
const tableList = ref<TTable[]>([])
const modalRef = ref()
const isEdit = ref(false)
const pagination = ref<{
  total: number
  current: number
  pageSize: number
}>({
  total: 0,
  current: 1,
  pageSize: 10,
})

const NATURAL_ID = 'c8534061-dade-4f0a-9d4a-eaf0ac273d6e'

const handleAdd = (
  formInfo: {
    img: string
    status: string
    sort: number
    type: string
    active: { type: string; activeId: string }
  } = {
    img: '',
    status: '1',
    sort: 0,
    type: '1',
    active: {
      type: '0',
      activeId: '',
    },
  },
) => {
  if (formInfo.img === '') {
    isEdit.value = false
  } else {
    isEdit.value = true
  }
  modalRef.value?.open(formInfo)
}

const handleUpdate = (formData: TTable) => {
  addBanner(formData)
}
const delBanner = async ({ _id }: { _id: string }) => {
  try {
    const resp = await deleteResource(_id)
    if (resp.code === 200) {
      message.success('删除成功')
      await getLis()
    } else {
      message.error(resp.message || '删除失败')
    }
  } catch {
    message.error('删除失败')
  }
}
async function addBanner(data: TTable) {
  try {
    if (isEdit.value) {
      const id = data._id
      if (!id) {
        message.error('缺少资源ID，无法编辑')
        return
      }
      const dto: UpdateAdminResourceDto = {
        type: data.type,
        status: data.status,
        sort: data.sort,
        img: data.img,
        video: data.video,
        active: data.active,
        for_natural: NATURAL_ID,
      }
      const resp = await updateResource(id as string, dto)
      if (resp.code === 200) {
        message.success('编辑成功')
        await getLis()
      } else {
        message.error(resp.message || '编辑失败')
      }
    } else {
      const dto: CreateAdminResourceDto = {
        for_natural: NATURAL_ID,
        type: data.type,
        status: data.status,
        sort: data.sort,
        img: data.img,
        video: data.video,
        active: data.active,
      }
      const resp = await createResource(dto)
      if (resp.code === 200) {
        message.success('新增成功')
        await getLis()
      } else {
        message.error(resp.message || '新增失败')
      }
    }
  } catch {
    message.error('提交失败')
  }
}
const getLis = async () => {
  try {
    const resp = await listResources(NATURAL_ID)
    if (resp.code === 200 && resp.data) {
      tableList.value = resp.data.list as unknown as TTable[]
      pagination.value.total = resp.data.list.length
    } else {
      message.error(resp.message || '加载失败')
    }
  } catch {
    message.error('加载失败')
  }
}
const changePagination = (paginations: { current: number; pageSize: number }) => {
  pagination.value.current = paginations.current
  pagination.value.pageSize = paginations.pageSize
  getLis()
}
onMounted(() => {
  getLis()
})
</script>
<style lang="stylus" scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
